<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>结果页面</title>
    <meta name="viewport" content="width=device-width,initial-scale=2.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <script th:src="@{/libs/jquery/jquery.min.js}" type="text/javascript"></script>
    <script th:src="@{/libs/jquery/jquery.qrcode.min.js}" type="text/javascript"></script>
</head>
<body>
<div>
    请求结果:
    <span data-th-text="${qr_message}"></span>
</div>
<div>
    <a th:href="${qr_url}"><span th:text="${qr_url}"></span></a>
    <input th:value="${qr_url}" type="hidden" id="code_value"/>
</div>
<div>二维码</div>
<div id="qrcode"></div>
<div id="imagQrDiv"></div>

<input type="hidden" name="" value=""/>
<script type="text/javascript">
   $(function(){
       var value = $("#code_value").val();
       $('#qrcode').qrcode(value);
       // $("#qrcode").qrcode({
       //     render: "table", //table方式
       //     width: 200, //宽度
       //     height:200, //高度
       //     text: value //任意内容
       // });
       // new QRCode(document.getElementById('qrcode'), 'your content');



       //从 canvas 提取图片 image
       function convertCanvasToImage(canvas) {
           //新Image对象，可以理解为DOM
           var image = new Image();
           // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
           // 指定格式 PNG
           image.src = canvas.toDataURL("image/png");
           return image;
       }

//获取网页中的canvas对象

       var mycanvas1=document.getElementsByTagName('canvas')[0];

//将转换后的img标签插入到html中

       var img=convertCanvasToImage(mycanvas1);

       $('#imagQrDiv').append(img);//imagQrDiv表示你要插入的容器id

       $("#qrcode").hide();
   })



</script>
</body>
</html>